<template>
	<view class="modifyPwd_layOut ">
		<view class="input">
			<view class="inputBg">
				<input class="filed email" value="" placeholder-style="color:#666" :placeholder="$t('forgetpwd.email')"
					@input="inputeEmail" />
			</view>
			<view class="inputBg getCode">
				<input class="filed e-code" value="" placeholder-style="color:#666" :placeholder="$t('forgetpwd.code')"
					@input="inputEmailCode" />

				<view class="button-container">

					<button class="code-btn" plain="true" @click="getVerificationCode" :disabled="countdown > 0">
						{{ countdown > 0 ? `${countdown}s` :  $t('forgetpwd.getCode') }}
					</button>
				</view>

			</view>
			<view class="inputBg">
				<input class="filed pwd" value="" placeholder-style="color:#666" :placeholder="$t('forgetpwd.pwd')"
					@input="inputNewPwd" />
			</view>
		</view>

		<view class="register-button" @click="toResetPwd">
			{{$t('forgetpwd.confirmBtn')}}
		</view>
	</view>
</template>

<script>
	import {
		apiUserGetEmailCode,
		apiUserSetPassWord
	} from '../../api/user_api';
	import { i18nTool } from '../../utils/i18en';
	export default {
		data() {
			return {
				countdown: 0,
				intervalId: 0,
				parama: {},
				email: null,
				checkCode: null,
				pwd: null,
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:i18nTool('forgetpwd.navTitle')
			})
		},
		methods: {
			async  getVerificationCode() {
				if (!this.email) {
					uni.showToast({
						icon:'none',
						title:i18nTool('forgetpwd.InputAcountHint'),
					})
					return;
				}
				let param = {
					email:this.email,
					type:2
				}
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				let res =await apiUserGetEmailCode(param);
				if(res.status == 0){
					uni.showToast({
						title:i18nTool('forgetpwd.success')
					})
					this.countdown = 60; // 倒计时60秒
					this.intervalId = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown -= 1;
						} else {
							clearInterval(this.intervalId);
						}
					}, 1000);
				}
				
			},
			async toResetPwd() {
				this.parama ={
					account:this.email,
					newPassword:this.pwd,
					checkCode:this.checkCode,
				}
				let res = await apiUserSetPassWord(this.parama);
				uni.showToast({
					title: i18nTool('forgetpwd.success'),
					icon:"none"
				})
				uni.navigateBack();
			},

			inputeEmail(e) {
				this.email = e.detail.value;
			},
			inputEmailCode(e) {
				this.checkCode = e.detail.value;
			},
			inputNewPwd(e) {
				this.pwd = e.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modifyPwd_layOut {
		.input {
			margin-top: 100rpx;

			.inputBg {
				margin: 40rpx 40rpx;
				border: 2rpx solid #BDBDBD;
				border-radius: 10rpx;
				height: 90rpx;
				align-items: center;

				.filed {
					height: 100%;
					padding-left: 30rpx;
					padding-right: 15rpx;
					color: #333;
					font-size: 30rpx;
				}
			}

			.getCode {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.button-container {
					text-align: right;

					.code-btn {
						margin-left: auto;
						/* 使button居右 */
						font-size: 30rpx;
						align-items: center;
						color: #3498DB;
						background-color: transparent;
						border: none;
					}
				}
			}


		}

		.register-button {
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 100rpx;
			height: 90rpx;
			color: #fff;
			background-color: #53786C;
			border-radius: 40rpx;
			@include flex-box-set(center);

		}
	}
</style>